<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ChannelUtils } from '@/utils/channel';
import { ChannelService } from '@/service/channel';
import { showToast } from '@tarojs/taro';

definePageConfig({
    navigationBarTitleText: '渠道调试'
});

const debugInfo = ref<string>('');

onMounted(() => {
    debugInfo.value = '渠道功能调试页面已加载\n';
    
    // 测试渠道工具
    try {
        const channelId = ChannelUtils.getChannelId();
        const isFromThirdParty = ChannelUtils.isFromThirdParty();
        const channelInfo = ChannelUtils.getChannelInfo();
        
        debugInfo.value += `渠道ID: ${channelId || '无'}\n`;
        debugInfo.value += `是否第三方: ${isFromThirdParty ? '是' : '否'}\n`;
        debugInfo.value += `渠道信息: ${JSON.stringify(channelInfo, null, 2)}\n`;
        
    } catch (error) {
        debugInfo.value += `渠道工具错误: ${error}\n`;
        // 渠道工具错误
    }
});

async function testChannelService() {
    try {
        debugInfo.value += '开始测试渠道服务...\n';
        
        // 测试渠道访问上报
        await ChannelService.reportChannelAccess();
        debugInfo.value += '渠道访问上报测试完成\n';
        
        showToast({
            title: '渠道服务测试完成',
            icon: 'success'
        });
    } catch (error) {
        debugInfo.value += `渠道服务错误: ${error}\n`;
        // 渠道服务错误
        
        showToast({
            title: '渠道服务测试失败',
            icon: 'error'
        });
    }
}

function clearDebug() {
    debugInfo.value = '';
}
</script>

<template>
    <view class="p-4">
        <view class="text-lg font-bold mb-4">渠道功能调试</view>
        
        <!-- 调试信息 -->
        <view class="bg-gray-100 p-4 rounded-lg mb-4">
            <view class="text-sm font-bold mb-2">调试信息:</view>
            <text class="text-xs whitespace-pre-wrap">{{ debugInfo }}</text>
        </view>
        
        <!-- 测试按钮 -->
        <view class="flex gap-2 mb-4">
            <button class="bg-blue-500 text-white px-4 py-2 rounded" @click="testChannelService">
                测试渠道服务
            </button>
            <button class="bg-gray-500 text-white px-4 py-2 rounded" @click="clearDebug">
                清除调试信息
            </button>
        </view>
        
        <!-- 说明 -->
        <view class="mt-4 p-4 bg-yellow-50 rounded-lg">
            <view class="text-sm font-bold mb-2">说明:</view>
            <view class="text-xs text-gray-600">
                <view>1. 此页面用于调试渠道功能</view>
                <view>2. 检查控制台输出获取详细信息</view>
                <view>3. 如果出现错误，请检查网络连接</view>
            </view>
        </view>
    </view>
</template>

<style scoped></style>
